<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>易办公</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{js/colResizable-1.5.min.js}"></script>
    <script th:src="@{/js/jjl_manage.js}" charset="utf-8"></script>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/ZhiWeiQuanXian/ZhiWeiQuanXian.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>

    <link rel="stylesheet" th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css}"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        .thead-dark tr th {
            text-align: center;
        }
    </style>
</head>

<body>


<nav class="navbar navbar-default jjl_navbar"
     style="border-radius: 0px; margin-bottom:0px !important; width: 99.4% !important; margin: 0px auto !important;">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">部门查找 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/manageA/jjl_sel}">全部员工</a>
                            <a th:each="bbb:${bbba}" th:text="${bbb.getJob()}" th:value="${bbb.getId()}"
                               th:href="@{/manageA/jjl_sel(bumen=${bbb.getId()})}">Action</a></li>

                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" name="chaozhao" placeholder="员工查找.....">
                </div>
                <button type="submit" class="btn btn-default">查找</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" data-toggle="modal"
                        data-target=".xiaomodal"
                        style="margin-top:10px">添加员工
                </button>
                <li class="dropdown">
                    <a th:href="@{/manageA/download}">导出excel表格</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="center-block zuidadiv">
    <table class="layui-table " style="height:30%;" id="jjl_table">
        <thead class="thead-dark">
        <tr align="center">
            <th>工号</th>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tr style="height: 10px" th:each="laa : ${listA.list}">

            <td scope="row" th:text="${laa.id}"></td>
            <td th:text="${laa.name}"></td>
            <td th:text="${laa.jobtitle.job}"></td>
            <td th:text="${laa.department.departmentname}"></td>
            <td th:if="${laa.state eq 1}"> 在职</td>
            <td th:if="${laa.state eq 0}"> 离职</td>
            <!-- Button trigger modal -->
            <td><!-- Button trigger modal -->
                <a th:href="@{/manageA/jjl_byid(yonghuid=${laa.id})}" type="button"
                   class="layui-btn layui-btn-xs tantantan"
                   data-toggle="modal" data-target="#myModal">
                    员工操作
                </a></td>
        </tr>

        <tfoot>
        <tr>
            <th colspan="7">

                <div>
                    <ul class="pager">
                        <li><a th:href="@{/manageA/jjl_sel}">首页</a>

                        </li>
                        <li>
                            <a th:href="@{/manageA/jjl_sel(pageNum=${listA.hasPreviousPage}?${listA.prePage}:1)}">上一页</a>


                        <li>
                            <a th:href="@{/manageA/jjl_sel(pageNum=${listA.hasNextPage}?${listA.nextPage}:${listA.pages})}">下一页</a>
                        </li>
                        <li><a th:href="@{/manageA/jjl_sel(pageNum=${listA.pages})}">尾页</a></li>
                    </ul>
                </div>
            </th>
        </tr>
        </tfoot>


    </table>
</div>
<div class="ui segment m-inline-block" align="right">
    当前第<span th:text="${listA.pageNum}"></span>页，总<span th:text="${listA.pages}"></span>页，共<span
            th:text="${listA.total}"></span>条记录
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" role="document">
        <div class="modal-content" >

            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade xiaomodal" role="dialog" aria-labelledby="mySmallModalLabel" align="center" >
    <div class="modal-dialog modal-sm" role="document">
        <!--class="form-horizontal" -->
        <form style="background-color: white; width: 500px; border-radius: 3px; padding: 20px" >

            <div class="form-group  modal_jjl">
                <div>
                    <label for="exampleInputEmail1">员工账号</label>
                    <input class="form-control jjl_username tiaozhi" id="exampleInputEmail1"
                           placeholder="请输入员工账号"> </input>

                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">员工姓名</label>
                    <input class="form-control jjl_name tiaozhi" id="exampleInputEmail2" placeholder="请输入员工姓名"> </input>

                </div>
                <div class="form-group">

                    <label for="exampleInputEmail1">员工密码</label>
                    <P readonly class="form-control-static tiaozhi" id="exampleInputEmail3" th:text="默认密码123456"></P>


                </div>
                <div class="form-group">
                    <label for="exampleInputEmail4">部门职位</label>
                    <select id="disabledSelect" class="jjl_jt_id">
                        <option th:each="bjob:${bbba}" th:value="${bjob.getId()}" th:text="${bjob.getJob()}"
                                class="list-group-item" id="exampleInputEmail4"></option>

                    </select>
                </div>


                <div class="form-group">

                    <label for="jjl_usersex">员工性别</label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="jjl_usersex" value="1"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="jjl_usersex" value="2"> 女
                    </label>
                </div>


                <div class="form-group">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" onclick="jjl_insert()" >提交</button>
                </div>
            </div>
        </form>
    </div>

</div>
<style>
    .modal_jjl {
        width: 350px;
        height: 400px;
    }

    td {
    !important;
        height: 46px;
    !important;
        width: 365px;
        text-align: center;
    }

    th {
        text-align: center;
    !important;
        height: 46px;
    !important;
        width: 365px;
    }

    .jjl_navbar {
        padding: 10px;
    }

    .zuidadiv {
        padding: 4px;
    }

</style>

<script>
    //打印表格
    var idTmr;

    function getExplorer() {
        var explorer = window.navigator.userAgent;
        //ie
        if (explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }
        //firefox
        else if (explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }
        //Chrome
        else if (explorer.indexOf("Chrome") >= 0) {
            return 'Chrome';
        }
        //Opera
        else if (explorer.indexOf("Opera") >= 0) {
            return 'Opera';
        }
        //Safari
        else if (explorer.indexOf("Safari") >= 0) {
            return 'Safari';
        }
    }

    function method5(jjl_table) {
        if (getExplorer() == 'ie') {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;

            try {
                var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
                    "Excel Spreadsheets (*.xls), *.xls");
            } catch (e) {
                print("Nested catch caught " + e);
            } finally {
                oWB.SaveAs(fname);
                oWB.Close(savechanges = false);
                oXL.Quit();
                oXL = null;
                idTmr = window.setInterval("Cleanup();", 1);
            }

        } else {
            tableToExcel(jjl_table)
        }
    }

    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }

    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
            base64 = function (
                s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            }
        return function (table, name) {
            if (!table.nodeType)
                table = document.getElementById(table)
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()
</script>


</body>


</html>